<template>
  <div class="sign">
    <p class="title">用户登录</p>
    <!-- 在 ElTabs 组件上使用 v-model 指令与我们之前在自定义组件上使用道理是相同的 -->
    <el-tabs v-model="paneName" type="border-card" class="tabs">
      
      <el-tab-pane label="账号" name="account">
        <el-input v-model="user.account" placeholder="请输入登录账号">
          <template #prepend>登录账号</template>
        </el-input>
        <el-input v-model="user.password" placeholder="请输入登录密码">
          <template #prepend>登录密码</template>
        </el-input>
        <el-row>
          <el-col :offset="20" :span="4" style="text-align:right">
            <el-button type="primary" @click="loginByAccount">登录</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="邮箱" name="email">
        <el-input v-model="user.email" placeholder="请输入登录邮箱">
          <template #prepend>登录邮箱</template>
        </el-input>
        <el-input v-model="user.password" placeholder="请输入登录密码">
          <template #prepend>登录密码</template>
        </el-input>
        <el-row>
          <el-col :offset="20" :span="4" style="text-align:right">
            <el-button type="primary" @click="loginByEmail">登录</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="手机号" name="tel">
        <el-row class="row">
          <el-col :span="4" class="label">手机号</el-col>
          <el-col :offset="1" :span="19">
            <el-input v-model="user.tel" placeholder="请输入手机号" />
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="4" class="label">登录密码</el-col>
          <el-col :offset="1" :span="19">
            <el-input v-model="user.password" placeholder="请输入登录密码" />
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :offset="5" :span="20">
            <el-button type="primary" @click="loginByTel">登录</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <div class="message">{{ message }}</div>
  </div>
</template>

<script>
import { ElTabs, ElTabPane, ElInput, ElRow, ElCol, ElButton} from 'element-plus';

export default {
  name: 'SignInView',
  data(){
    return {
      paneName: 'tel',
      user: {
        account: '',
        email:'',
        tel: '',
        password: ''
      },
      message: ''
    }
  },
  methods: {
    signIn(type){
      const params = {
        [type]: this.user[type] ,
        password: this.user.password
      }
      console.log( params );

      // 注意 `/back` 是在 `vite.config.js` 的 proxy 中配置的前缀
      fetch('/back/user/sign/in',{
        method: 'post',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify( params )
      }).then( resp => {
        return resp.json();
      }).then( data => {
        // 注意 `1101` 是 user-back-end 中的 constant/user.js 约定的
        if( data.code == 1101 ) {
          // 保存认证信息( 即将 JWT 保存到 sessionStorage 中 )
          sessionStorage.setItem( 'token' , data.result.token );
          // 编程式导航
          this.$router.push( { name: 'list' } );
          return; // 让当前函数结束执行以防止后续代码的执行
        }
        this.message = data.desc ;
      }).catch( cause => {
        console.log( cause );
      });
    },
    loginByAccount(){
      if( this.user.account == '' ) {
        this.message = '请先输入登录账号';
        return;
      }
      if( this.user.password == '' ) {
        this.message = '请先输入登录密码';
        return;
      }
      // 调用 signIn 方法完成登录操作
      this.signIn( 'account' );
    },
    loginByEmail(){
      if( this.user.email == '' ) {
        this.message = '请先输入邮箱';
        return;
      }
      if( this.user.password == '' ) {
        this.message = '请先输入登录密码';
        return;
      }
      // 调用 signIn 方法完成登录操作
      this.signIn( 'email' );
    },
    loginByTel(){
      if( this.user.tel == '' ) {
        this.message = '请先输入手机号';
        return;
      }
      if( this.user.password == '' ) {
        this.message = '请先输入登录密码';
        return;
      }
      // 调用 signIn 方法完成登录操作
      this.signIn( 'tel' );
    }
  },
  components: { ElTabs, ElTabPane, ElInput, ElRow, ElCol, ElButton}
}
</script>

<style scoped>
.sign {
  margin: 25px auto;
  border: 1px solid transparent;
  box-shadow: 0 0 30px -10px blue;
  width: 60vw;
}
.title {
  margin: 10px;
  text-align: center;
  font-size: 30px;
}
.tabs {
  margin: 10px;
}
.row {
  margin: 10px;
}
.label {
  text-align: right;
}
.message {
  margin: 10px;
}
</style>